CSSのtransformrotateZ,rotateX,rotateZそれぞれの動き

背景

transform:rotateのX,Y,Zの動きが分かりにくかったのでまとめました。
完全の個人的なメモ…

transform:rotate各種動き

下記のような縦軸、横軸にして交差したところは足しこんでいます。
縦軸：Z>X>Yの順でそれぞれ４５°設定
横軸：Z>X>Yの順でそれぞれ４５°設定

See the Pen transform:rotata by hashito (@hashito) on CodePen.

関連する記事

・CSSでhoverでafter要素で文字を表示するとプルプルする件